<template>
    <div class="shop-header">
        <div class="shop-info">
			<img :src="url + shop_Info.logo" alt="" />
			<div>
				<p>{{shop_Info.merchant_name}}</p>
				<!-- <p>销量：12202</p> -->
			</div>
			<a @click="addCollection">+ &nbsp;收藏</a>
		</div>
		<div class="shop-info-more">
			<a @click="kefu"><i></i>&nbsp; 客服</a>
			<!-- <a href="#"><i></i>客服</a> -->
			<!-- <a href="#"><i></i>全部商品</a> -->
		</div>
        <!-- 弹框 -->
        <div class="black" v-show="tan" @click="times"></div>
        <div class="rule" v-show="tan2">
            <p class="ruleTel">客服电话</p>
            <div>
                <!-- <p>已经领了2次了，分享可在领一次</p> -->
                <p class="ruleText">18526793565</p>
                <div class="ruleBtn">
                    <!-- <a class="link">确定</a> -->
                </div>
            </div>
            <i @click="times">&times;</i>
        </div>
    </div>
</template>

<script>
import qs from 'qs'
import wx from 'weixin-jsapi'
import url from 'url'
    export default {
		name:'shopHeader',
		data () {
            return {
                shop_Info:{},
                url:'http://api.huiwanzhong365.com',
                tan:false,
                tan2:false,
            }
        },
        methods:{
            switchTo(path){
                // console.log(this.$router)
                this.$router.push(path)
            },
            //客服弹框
            kefu:function(){
                this.tan = true
                this.tan2 = true
            },
            times:function(){
                this.tan = false
                this.tan2 = false
            },
            //添加收藏
            addCollection:function(){ 
                var that = this
                var openid = localStorage.getItem("openid")
                var draw = { 
                    openid:openid,
                    goods_id:'',
                    merchant_id:this.$route.params.id,
                    type:1,
                }
                that.$http.post('/index/user/addCollection',qs.stringify(draw)).then(res=>{
                    console.log(res.data)
                    alert(res.data.info)
                }).catch(err=>{
                    console.log(err)
                })
            },
            //获取店铺信息
            shopInfo:function(){
                var that = this
                // this.$route.params.id
                console.log(this.$route.params.id)
                var openid = localStorage.getItem("openid")
                var draw = { 
                    openid:openid,
                    merchant_id:this.$route.params.id,
                }
                that.$http.post('/index/merchant/MerchantLogo',qs.stringify(draw)).then(res=>{
                    console.log(res)
                    this.shop_Info = res.data
                    // this.shop_Info.logo = res.data.logo
                }).catch(err=>{
                    console.log(err)
                })
            }
        },
        mounted(){
            this.shopInfo();
        }
    }
</script>

<style scoped>
.black{
    background:rgba(0, 0, 0, 0.3);
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index: 19;
}
.rule{
    position: fixed;
    width: 80%;
    top: 30%;
    left: 10%;
    background: #FFF;
    border-radius: 5px;
    overflow: hidden;
    z-index: 20;
    text-align: center;
}
.ruleTel{
    font-size:18px;
    font-weight: 600;
    margin-top:15px;
}
.ruleText{
    font-size:13px;
    margin-top:15px;
    width:94%;
    margin-left:3%;
    line-height: 24px;
    color:#999;
}
.rule p:nth-child(4){
    font-size:12px;
    text-align: center;
    margin-top:10px;
    margin-bottom: 15px;
}
.rule p:nth-child(4) a{
    color:#259B24;
}
.rule i{
    color:#FFF;
    background: #BBB;
    width:20px;
    height:20px;
    border-radius: 50%;
    text-align: center;
    font-size:16px;
    position: absolute;
    top:10px;
    right: 10px;
    line-height: 20px;
}
.ruleBtn{
    margin-top:15px;
}

.link{
    width: 100px;
    text-align: center;
    height: 34px;
    color: #FFF;
    border-radius: 5px;
    background: #000;
    border: 0;
    display: inline-block;
    line-height: 38px;
    margin-bottom: 15px;
}
.shop-header{
    width:94%;
    display: inline-block;
    margin-left: 3%;
}
/* .shop-info a{
	width: 66px;
	height: 25px;
	line-height: 25px;
	border-radius: 20px;
	background-color: rgba(254, 39, 70, 1);
	color:#FFF;
	text-align: center;
	display: inline-block;
	float: right;
	margin-top:15px;
} */
.shop-info a{
    padding:5px 13px;
    background-color: rgba(254, 39, 70, 1);
    color:#FFF;
    float: right;
    margin-top:15px;
    border-radius: 20px;
}
.shop-info {
	margin-top:10px;
	margin-bottom: 10px;
}
.shop-info img{
	width:54px;
	height:54px;
	border-radius: 5px;
	float: left;
}
.shop-info div{
	margin-left: 2%;
	width:50%;
	display: inline-block;
}
.shop-info div p:nth-child(1){
	font-weight: 600;
	margin-top:5px;
}
.shop-info div p:nth-child(2){
	color:#999;
	font-size:12px;
	margin-top:10px;
}
.shop-info-more{
	display: inline-block;
	width:100%;
	margin-top:10px;
}
.shop-info-more a:nth-child(1),.shop-info-more a:nth-child(2){
	/* width: 66px;
	height: 25px;
	line-height: 25px;
	border-radius: 20px;
	background-color: rgba(223, 223, 223, 1);
	display: inline-block;
	float: left;
	text-align: center;
	color:#999;
    margin-right: 15px;
     */
    padding:5px 13px;
    background-color: rgba(223, 223, 223, 1);
    color:#999;
    float: left;
    margin-top:15px;
    border-radius: 20px;
}
.shop-info-more a:nth-child(1) i{
	display: block;
    height: 19px;
    width: 17px;
    overflow: hidden;
    background: url(../../../assets/kefu.png) no-repeat;
    background-size: 100%;
    margin-top: 1px;
    margin-left: 1px;
    float: left;
    vertical-align: middle;
}
.shop-info-more a:nth-child(2) i{
	display: block;
    height: 19px;
    width: 17px;
    overflow: hidden;
    background: url(../../../assets/kefu.png) no-repeat;
    background-size: 100%;
    margin-top: 5px;
    margin-left: 5px;
    float: left;
    vertical-align: middle;
}
.shop-info-more a:nth-child(3){
	color:#FC2847;
	font-weight: 600;
	float: right;
}
.shop-info-more a:nth-child(3) i{
	display: block;
    height: 19px;
    width: 17px;
    overflow: hidden;
    background: url(../../../assets/lihe.png) no-repeat;
    background-size: 100%;
    margin-top: 0px;
    float: left;
    vertical-align: middle;
    margin-top: 2px;
}

</style>